<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性computed使用</title>
</head>
<body>
    <div id="app">
        <button @click="reduce">减少</button>
        <div v-text="num"></div>
        <button @click="add">增加</button>
        <!-- 计算属性和data里面属性使用方式一样{{}}或者v-text="" -->
        <div v-if="error" style="background-color:red;color:white;">提示：{{error}}</div>
        <div v-if="error1" style="background-color:red;color:white;">{{error1}}</div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.29/vue.global.prod.min.js"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    num:1,
                    tip:''
                }
            },
            computed:{
                // computed中具有缓存的功能
                error(){
                    const msg = this.num == 0 ? '数字不能小于0' : (this.num == 10 ? '数字不能大于10' : '');
                    return msg;
                },
                error1:{
                    get(){
                        const msg = this.num == 0 ? '数字不能小于0' : (this.num == 10 ? '数字不能大于10' : '');
                        if(msg) return this.tip + msg;
                    },
                    set(tip){
                        this.tip = tip;
                    }
                },
            },
            methods:{
                add(event){
                    this.error1 = "提示：";
                    if(this.num < 10) this.num++;
                },
                reduce(event){
                    this.error1 = "警告：";
                    if(this.num > 0) this.num--;           
                }
            }
        });
        const vm = app.mount('#app');
    </script>
</body>
</html>